import {Toast} from "antd-mobile";
import {useNavigate} from "react-router-dom";

import './index.scss'
import {useEffect, useRef, useState} from "react";
import {getCityAPI, getHotCityAPI} from "../../apis/list";
import {getCurrentCity} from "../../utils";
// 导入List组件
import {AutoSizer, List} from 'react-virtualized'
import {NavHeader} from "../../components/NavHeader";


// 索引标题高度
const TITTLE_HEIGHT = 36
// 城市名称高度
const NAME_HEIGHT = 50

// 有房源的城市
const HOUSE_CITY = ['北京', '上海', '广州', '深圳']

const CityList = () => {

    const navigate = useNavigate();

    const [cityList, setCityList] = useState({});
    const [cityIndex, setCityIndex] = useState([]);

    // 判断索引高亮
    const [activeIndex, setActiveIndex] = useState(0);

    const cityListRef = useRef(null);

    // 数据格式化方法
    const formCityData = (list) => {

        // 初始化
        const cityList = {}

        // cityList
        // 遍历list数组
        list.forEach(item => {
            // 获取每一个城市的首字母
            const first = item.short.substring(0, 1);
            // 判断cityList有无该分类
            if (cityList[first]) {
                // 有：push
                cityList[first].push(item)
            } else {
                // 没有：创建数组，把当前城市添加到数组中
                cityList[first] = [item]
            }
        })

        // cityIndex
        const cityIndex = Object.keys(cityList).sort()

        // 返回数据
        return {
            cityList,
            cityIndex
        }
    }

    // 处理字母索引的方法
    const formatCityIndex = (letter) => {
        switch (letter) {
            case '#':
                return '当前'
            case 'hot':
                return '热门城市'
            default:
                return letter.toUpperCase()
        }
    }

    // 动态计算每一行高度
    const getRowHeight = ({index}) => {
        // 索引标题高度+城市数量*每个城市高度
        return TITTLE_HEIGHT + cityList[cityIndex[index]].length * NAME_HEIGHT
    }

    // 获取List组件渲染行的信息
    const onRowsRendered = ({startIndex}) => {
        if (startIndex !== activeIndex) {
            setActiveIndex(startIndex);
        }
    }

    // 点击右侧索引触发
    const onActiveIndex = (index) => {
        if (activeIndex !== index) {
            cityListRef.current.scrollToRow(index)
        }
    }

    // 切换城市
    const changeCity = ({label, value}) => {
        // 有房源数据
        if (HOUSE_CITY.indexOf(label) > -1) {
            // 保存到本地缓存中，返回上一页
            localStorage.setItem("hkzf_city", JSON.stringify({label, value}))
            navigate(-1)
        } else {
            // 没有房源数据
            Toast.show({
                content: '该城市暂无房源'
            })
        }
    }

    // 渲染完成后执行
    useEffect(() => {
        // 定义城市列表请求
        const getCity = async () => {
            const res = await getCityAPI();
            const {cityList, cityIndex} = formCityData(res.data.body);

            // 获取最热门城市
            const hotRes = await getHotCityAPI();
            // 将数据添加到cityList
            cityList['hot'] = hotRes.data.body
            // 将数据添加到cityIndex
            cityIndex.unshift('hot')

            // 获取当前定位城市
            const currentCity = await getCurrentCity();
            // 将数据添加到cityList
            cityList['#'] = [currentCity]
            // 将数据添加到cityIndex
            cityIndex.unshift('#')

            setCityList(cityList)
            setCityIndex(cityIndex)
        }

        getCity()

        // 要保证List组件中已经有数据了，没有则报错
        // 解决，保证这个方法在获取到数据即可
        // cityListRef.current.measureAllRows()

    }, [])

    // 渲染每一行数据的函数
    function rowRenderer({
                             key, // Unique key within array of rows
                             index, // 索引号
                             isScrolling, // 当前项是否正在滚动中
                             isVisible, // 当前项在list中是可见的
                             style, // 注意：重点属性，一定要给每一行数据添加该样式
                         }) {

        // 每一行字母的索引
        const letter = cityIndex[index];

        return (
            <div key={key} style={style} className="city">
                <div className="title">{formatCityIndex(letter)}</div>
                {
                    cityList[letter].map(item =>
                        <div className="name" key={item.value} onClick={() => changeCity(item)}>
                            {item.label}
                        </div>)
                }
            </div>
        )
    }

    return (
        <div className="cityList">
            {/*  顶部导航栏  */}
            <NavHeader>城市选择</NavHeader>

            {/*  城市列表  */}
            <AutoSizer className="list">
                {
                    ({width, height}) =>
                        <List
                            scrollToAlignment="start"
                            ref={cityListRef}
                            width={width}
                            height={height}
                            rowCount={cityIndex.length}
                            rowHeight={getRowHeight}
                            rowRenderer={rowRenderer}
                            onRowsRendered={onRowsRendered}
                        />
                }
            </AutoSizer>

            {/*  右侧索引列表  */}
            <ul className="city-index">
                {cityIndex.map((item, index) => (
                    <li className="city-index-item" key={item}>
                        <span onClick={() => onActiveIndex(index)}
                              className={activeIndex === index ? "index-active" : ''}>
                            {item === 'hot' ? '热' : item.toUpperCase()}
                        </span>
                    </li>
                ))}
            </ul>
        </div>
    );
}

export default CityList